<template>
  <div class="home">
    <div class="flex container">
	  <div :class="out?'assadeOut':'assadeIn'" class="newAssade" :style="{background:sideTheme}">
		  <div>
			  <div class="logo" v-if="sidebarLogo">
				 <img :src="require('@/assets/logo.png')" alt="">
			  </div>
			  <el-aside>
				  <el-menu :default-active="thisCurrentMenu"  :background-color="sideTheme"  
					text-color="#fff" 
					:active-text-color="asdTextColor"
					>
					  <el-submenu style="position: relative;" :index="++i+''" v-for="(el,i) in menuList" :key="i">
						   <template slot="title">
							<i class="iconfont iconHover" 
							  :class="el.icon" 
							  style="color: #fff;"
							  @mouseenter="mouseenter($event,i)"
							  >
							</i>   
								<span v-if="out">
									{{el.title}}
								</span>
							</template>
						   <el-menu-item-group v-if="out">
							   <el-menu-item 
									v-for="(item,index) in el.children" 
									:key="index" 
									:index="item.url" 
									@click="goPath(item,i)"
								> 
									<span>{{item.title}}</span> 
							   </el-menu-item>
						   </el-menu-item-group>
					   </el-submenu>
				  </el-menu>
			  </el-aside>
			  
		  </div>
	  </div>
	<!-- :class="out?'assadeOut':'assadeIn'" -->
		  <div class="main" :class="out?'mainOut':'mainIn'">
			  <floatAssade :childList="childList" 
				@toChildPath="toChildPath"
				:currentMenu="currentMenu"
				:out="out"
				:top="top"
				@childMouseLeave="childMouseLeave"
			  >
			  </floatAssade>
			  <navBar :levelList="levelList" @changeAsdBar="changeAsdBar"></navBar>
			  <div class="container">
				 <!-- <div :class="fixedHeader?'fixed-header':''" v-if="tags.length && tagsView">
					 <tagView :currentPath="currentMenu" :tags="tags" @toChildPath="toChildPath"></tagView>
				 </div> -->
				  <!-- <div style="height: 40px;" v-if="fixedHeader && tags.length && tagsView"></div> -->
				  <div class="app-main">
					  <keep-alive>
					  	  <router-view v-if="isKeep" />
					  </keep-alive>
					      <router-view v-if="!isKeep" />
					  <!-- <router-view/>	  -->
				  </div>
			  </div>
		  </div>
	   
    </div>
  </div>
</template>


<script>
import navBar from './child/Navbar.vue'
import tagView from './child/tagView.vue'
import floatAssade from './child/floatAssade.vue'
import menuList from './child/menu.js'
export default {
  data() {
    return {
		top:'70px',
		childList:[],
		out:true,
		tags:[],
	    levelList:[
		  {
			  title:'首页'
		  },
		  {
			  title:'桌面'
		  }
	  ],
		currentMenu: "",
		thisCurrentMenu:"",
		menuList:[]
    };
  },
  components:{
	  navBar,tagView,floatAssade
  },
  computed:{
	  asdTextColor:{
		  get(){
		  	 return this.$store.state.settings.asdTextColor
		  }
	  },
	  sideTheme:{
		  get(){
		  	 return this.$store.state.settings.sideTheme
		  }
	  },
	  sidebarLogo:{
		  get(){
			  return this.$store.state.settings.sidebarLogo
		  }
	  },
	  fixedHeader:{
		 get(){
		 	return this.$store.state.settings.fixedHeader
		 } 
	  },
	  tagsView:{
	  		 get(){
	  		 	return this.$store.state.settings.tagsView
	  		 } 
	  },
	  isKeep() {
	    return this.$store.state.settings.isKeep
	  },
  },
  created() {
	  console.log(this.menuList,333)
	  let mlist = sessionStorage.getItem('menuList')
	  if(mlist){
		   this.menuList = JSON.parse(mlist) 
	  }else{
		   this.menuList = menuList.menuList
	  }
	
	let item = {
		parent:'',
		title:'',
		url:''
	}
	
	this.menuList.forEach((el,i)=>{
		el.children.forEach((ele,ind)=>{
			if(ele.url == this.$route.path){
				item.parent = this.menuList[i].title
				item.title = this.menuList[i].children[ind].title
				item.url = this.$route.path
			}
		})
	})
	
	this.pushTag()
	if(this.tags.length==0){
		if(item.title){
			this.tags.push(item)
			this.currentMenu = this.$route.path
		}
	}
	this.thisCurrentMenu = this.$route.path
  },
  watch: {
     $route(to, from) {
		
		// var ele = document.getElementsByClassName('app-main')
		//  this.$utils.addClass(ele[0],'fade-enter')
		//  setTimeout(()=>{
		// 	 this.$utils.removeClass(ele[0],'fade-enter')
		//  },1000)
		 console.log(to,3333333)
		 if(this.$route.query.order_number){
			  this.currentMenu =`${to.path}?order_number=${this.$route.query.order_number}`
		 }else{
			  this.currentMenu = to.path;
		 }
		 this.thisCurrentMenu = to.path
		
		 this.pushTag()
     }
  },
  mounted() {
    this.getUrl()
  },
  methods: {
	  pushTag(){
		  let order_number = this.$route.query.order_number || ''
		  let small_order_number = this.$utils.sliceStr(order_number,6)
		  
		  if(this.$route.path=='/settlementSys/payAmount'){
			 if(order_number){
				this.goPath({parent:"结算管理",title:"付款结算"+small_order_number,
				url:"/settlementSys/payAmount?order_number="+order_number},7,false)
			 }
		  }
		  
		  if(this.$route.path=='/settlementSys/putAmount'){
			 if(order_number){
				this.goPath({parent:"结算管理",title:"收款结算"+small_order_number,
				url:"/settlementSys/putAmount?order_number="+order_number},7,false)
			 }
		  }
		  
		  if(this.$route.path=='/buyerSys/buyerInfo'){
			 if(order_number){
				this.goPath({parent:"采购管理",title:"采购入库"+small_order_number,
				url:"/buyerSys/buyerInfo?order_number="+order_number},3,false)
			 }
		  }
		  if(this.$route.path=='/buyerSys/buyerReturn'){
			 if(order_number){
				this.goPath({parent:"采购管理",title:"采购退货"+small_order_number,
				url:"/buyerSys/buyerReturn?order_number="+order_number},3,false)
			 }
		  }
		  
		  if(this.$route.path=='/wholesalerSys/wholesaler'){
			 if(order_number){
				this.goPath({parent:"批发管理",title:"快速批发"+small_order_number,
				url:"/wholesalerSys/wholesaler?order_number="+order_number},5,false)
			 }
		  }
		  if(this.$route.path=='/wholesalerSys/wholesalerReturn'){
			 if(order_number){
				this.goPath({parent:"批发管理",title:"批发退货"+small_order_number,
				url:"/wholesalerSys/wholesalerReturn?order_number="+order_number},5,false)
			 }
		  }
		  
		  if(this.$route.path=='/settlementSys/settlementPay'){
			 if(order_number){
				this.goPath({parent:"结算管理",title:"预付款"+small_order_number,
				url:"/settlementSys/settlementPay?order_number="+order_number},7,false)
			 }
		  }
		  if(this.$route.path=='/settlementSys/settlementPut'){
			 if(order_number){
				this.goPath({parent:"结算管理",title:"预收款"+small_order_number,
				url:"/settlementSys/settlementPut?order_number="+order_number},7,false)
			 }
		  }
		  
		  
	  },
	  mouseenter(e,i){
		  this.top = (e.screenY-120) + 'px'
		  this.childList = this.menuList[i-1].children
		  for(let item of this.childList){
			  item.parent = this.menuList[i-1].title
		  }
	  },
	  childMouseLeave(){
		 this.childList = [] 
	  },
	  changeAsdBar(out){
		this.out = out
	  },
	  getUrl(){
	      let currentUrl = window.location.href;
	      this.thisCurrentMenu = currentUrl.split('#')[1];
		  this.menuList.forEach((el,i)=>{
			  el.children.forEach((item,ind)=>{
				  if(item.url==this.thisCurrentMenu){
					  this.levelList = [
					  		  {
					  			  title:el.title
					  		  },
					  		  {
					  			  title:item.title
					  		  }
					  ]
				  }
			  })
		  })
	  },
	  goPath(item,i,isPush=true){
		  this.levelList[0].title = this.menuList[i-1].title
		  this.levelList[1].title = item.title
		  let bool =this.tags.some((el,i)=>{
			  return el.title == item.title
		  })
		  item.parent =  this.menuList[i-1].title
		  if(!bool) this.tags.push(item)
		  if(isPush){
			 this.jump(item.url)
		  }
	  },
	  toChildPath(item){
		 this.levelList[0].title = item.parent
		 this.levelList[1].title = item.title
		 let bool =this.tags.some((el,i)=>{
		 	 return el.title == item.title
		 })
		 if(!bool) this.tags.push(item)
		  this.$router.push({path:item.url})
	  },
  }
};
</script>
<style lang="scss">
	.app-main{
		position: relative;
	}
	.fade-enter {
	 animation:mymove 3s linear;
	}
	@keyframes mymove
	{
	  0% {opacity:1}
	  20% {opacity:0}
	  50% {opacity:0.3}
	  70% {opacity:0.8}
	  100% {opacity:1}
	}
	.fixed-header{
		position: fixed;top: 50px;z-index: 100;width: 88%;background-color: #f5f5f5;
	}
	.newAssade{
		overflow-y: scroll;
		overflow-x: hidden;
		scrollbar:1px;
		height: 100vh;
		position: fixed;
		padding: 0;
		z-index: 10;
		.el-menu-item-group__title{
		  padding: 0 !important;
		}
		.logo{
			text-align: center;
			padding: 15px 0 5px;
			img{
				height: 40px;
			}
		}
		
	}
	.newAssade::-webkit-scrollbar{
		width: 0.1px;
	}
	.assadeOut{
		width: 210px;
		transition: all .4s;
	}
	.assadeIn{
		width: 60px;
		transition: all .4s;
	}
	.mainOut{
		margin-left: 200px;
		transition: all .4s;
	}
	.mainIn{
		margin-left: 50px;
		transition: all .4s;
	}
	
	.main{
		   min-height: 100vh;
		   flex: 1;
		   background-color: rgb(245,245,245);
		   overflow-x: scroll;
		   .container{
			   padding: 0px 20px;
		   }
		   
	   }
	

</style>
